<template>
  <view class="border font-sm px-2 py-1 rounded-10"
   :class="seconds==props.seconds?'font-theme-color border-theme':'text-grey border'"
   >
  {{ seconds===props.seconds?(props.status?"获取验证码":"重新发送"):seconds }}
  </view>
</template>

<script setup>
import {ref} from 'vue'
const props = defineProps({
  seconds: {
    type: Number,
    default: 60
  },
  status: {
    type: Boolean,
    default: false
  }
})
let seconds = ref(props.seconds)
const emit = defineEmits(['timeup'])
let timer = null
const start = () => {
  if (timer) {
    return
  }
  timer = setInterval(() => {
    seconds.value -= 1
    props.status = true
    if (seconds.value == 0) {
      clearInterval(timer)
      seconds.value = props.seconds
      timer = null
      emit('timeup')
    }
  }, 1000)
}
defineExpose({
  start
})
</script>

<style scoped></style>